<template>
   <div id="Inform">
      <div v-for="item in InformData" :key="item.id"> 
         <transition name="leftToRight" >
             <InformOne  :item='item' class="InformOne flex" v-if="item.isShow"/>
         </transition>
      </div>
   </div>
</template>
<script>
import InformOne from './InformOne.vue'
import {mapState,mapMutations} from 'vuex'
  export default 
  {
  components: { InformOne },
     name :'', 
     computed:{
      ...mapState('Tool',['InformData'])
     },
     methods:{
       ...mapMutations('Tool',['INFOEMADD']),
     }
  }
</script>
<style scoped>
*{
  --InformOneHeight:70px
}
#Inform{
   position: fixed;
   left: 10px;top: 70px;
   max-width: 90vw;
   max-height: 50vh;
   overflow: hidden;
   z-index: 1000;

   
}
.InformOne{
   width: 100%;
   height:  calc( var(--InformOneHeight) );


   margin-top: 20px;
   background: white;
   box-sizing: border-box;
   flex-wrap: nowrap;
   justify-content: flex-start;
   position: relative;
   overflow: hidden;
}
</style>